<template>
    <ElCard class="marginBottom">
        <ElForm inline>
            <ElFormItem label="字典键" style="margin-bottom: 0;">
                <ElInput v-model="searchDictKey" placeholder="请输入字典键" maxlength="30" show-word-limit />
            </ElFormItem>
            <ElFormItem label="字典值" style="margin-bottom: 0;">
                <ElInput v-model="searchDictValue" placeholder="请输入字典值" maxlength="30" show-word-limit />
            </ElFormItem>
            <ElFormItem style="margin-bottom: 0;">
                <ElButton @click="onSearchDictData" type="primary">搜索</ElButton>
                <ElButton @click="onReset" type="primary">重置</ElButton>
            </ElFormItem>
        </ElForm>
    </ElCard>
    <ElCard>
        <template #header>
            <ElButton @click="() => router.back()">返回</ElButton>
            <ElButton type="primary" @click="onAddDictData" v-hasPermi="['sys:dict:insert']">新增字典数据</ElButton>
        </template>

        <ElTable :data="resultData.records" v-loading="isLoading">
            <ElTableColumn label="序号" prop="name" width="150">
                <template #="{ row, $index }: { row: SysDictDataVO, $index: number }">
                    {{ $index + 1 }}
                </template>
            </ElTableColumn>
            <ElTableColumn label="字典标识符" prop="identifier" />
            <ElTableColumn label="字典键" prop="dictKey" />
            <ElTableColumn label="字典值" prop="dictValue" />
            <ElTableColumn label="备注" prop="comment" />
            <ElTableColumn label="创建时间">
                <template #="{ row, $index }: { row: SysDictDataVO, $index: number }">
                    {{ row.createTime }}
                </template>
            </ElTableColumn>
            <ElTableColumn label="修改时间">
                <template #="{ row, $index }: { row: SysDictDataVO, $index: number }">
                    {{ row.modifyTime }}
                </template>
            </ElTableColumn>
            <ElTableColumn label="操作" width="350px">
                <template #="{ row, $index }: { row: SysDictDataVO, $index: number }">
                    <ElButton type="primary" @click="onShowDictData(row)" v-hasPermi="['sys:dict:query']">详情</ElButton>
                    <ElButton type="warning" @click="onEditDictData(row)" v-hasPermi="['sys:dict:update']">编辑</ElButton>
                    <Popconfirm :title="`确定删除${row.dictKey}?`" icon="Delete" @confirm="onDeleteDictData(row)">
                        <ElButton type="danger" v-hasPermi="['sys:dict:delete']">删除</ElButton>
                    </Popconfirm>
                </template>
            </ElTableColumn>
        </ElTable>
        <template #footer>
            <Pagination v-model="resultData" @pageInfoChange="handleQuery"></Pagination>
        </template>
    </ElCard>

    <!-- 字典数据 新增/编辑/详情 对话框 -->
    <ElDialog v-model="dialogInfo.show" :title="dialogInfo.title" width="700px" :show-close="false"
        :close-on-press-escape="false" :close-on-click-modal="false">
        <ElForm ref="formInstance" :rules="checkFormRoles" :model="formInfo" label-width="auto"
            :disabled="dialogInfo.disable">
            <ElFormItem label="字典键" prop="dictKey">
                <ElInput v-model="formInfo.dictKey" placeholder="请输入字典键" maxlength="30" show-word-limit />
            </ElFormItem>
            <ElFormItem label="字典值" prop="dictValue">
                <ElInput v-model="formInfo.dictValue" placeholder="请输入字典值" maxlength="30" show-word-limit />
            </ElFormItem>
            <ElFormItem label="备注" prop="comment">
                <ElInput v-model="formInfo.comment" type="textarea" placeholder="请输入备注" maxlength="30"
                    show-word-limit />
            </ElFormItem>
        </ElForm>
        <template #footer>
            <ElButton @click="hideDialog">取消</ElButton>
            <ElButton type="primary" @click="submitFormData()">确定</ElButton>
        </template>
    </ElDialog>
</template>

<script setup lang="ts">
import { onUpdated, reactive, ref } from "vue";
import { ElButton, ElCard, ElDialog, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, type FormRules } from "element-plus";
import { addDictData, deleteDictData, queryDictDataPage, updateDictData } from "@/api/sysDict/sysDict";
import { sysDictDataVOToDTO, type SysDictDataDTO, type SysDictDataFiltDTO, type SysDictDataVO } from "@/api/sysDict/sysDictType";
import { usePageQuery } from "@/hook/useQuery";
import { useFormDialog } from "@/hook/useDialog";
import Pagination from "@/components/custom/Pagination.vue";
import router from "@/router";
import Popconfirm from "@/components/custom/Popconfirm.vue";
import type { PageQueryDTO, PageQueryVO } from "@/api/type/baseType";

/**
 * 搜索筛选字典键
 */
const searchDictKey = ref<string>()
/**
 * 搜索筛选字典值
 */
const searchDictValue = ref<string>()

const props = defineProps({
    identifier: {
        type: String,
        required: true
    }
})

/**
 * 新增字典数据
 */
const onAddDictData = () => {
    showDialog('新增字典', { identifier: props.identifier } as SysDictDataDTO, () => addDictData(formInfo.value))
}

/**
 * 修改字典数据
 * @param sysDictVO 要修改的字典数据
 */
const onEditDictData = (sysDictDataVO: SysDictDataVO) => {
    showDialog('编辑字典', sysDictDataVOToDTO(sysDictDataVO), () => updateDictData({ id: sysDictDataVO.id }, formInfo.value))
}
/**
 * 删除字典数据
 * @param sysDictVO 要删除的字典数据
 */
const onDeleteDictData = async (sysDictDataVO: SysDictDataVO) => {
    await deleteDictData({ id: sysDictDataVO.id })
    handleQuery()
}

/**
 * 进入字典数据详情页面
 * @param identifier 
 */
const onShowDictData = (sysDictDataVO: SysDictDataVO) => {
    showDialog('字典详情', sysDictDataVOToDTO(sysDictDataVO), undefined)
}

/**
 * 分页查询所有DictData列表
 * @param pageQueryDTO
 * @returns 
 */
const queryDictDataPageFill = (pageQueryDTO: PageQueryDTO<SysDictDataFiltDTO>):
    Promise<PageQueryVO<SysDictDataVO>> =>
    queryDictDataPage(pageQueryDTO, props.identifier)

/**
 * 封装查询方法
 */
const {
    handleQuery, // 封装后的查询方法
    handleParamChange,
    resultData, // 查询到的数据
    isLoading   // 是否正在查询
} = usePageQuery<SysDictDataFiltDTO, SysDictDataVO>(queryDictDataPageFill)

/**
 * 搜索，该页面必须通过这个方法加载分页数据，因为默认添加了必备的筛选参数 identifier
 */
const onSearchDictData = () => {
    handleParamChange({
        dictKey: searchDictKey.value,
        dictValue: searchDictValue.value
    })
    handleQuery()
}

/**
 * 重置搜索条件
 */
const onReset = () => {
    searchDictKey.value = undefined
    searchDictValue.value = undefined
    onSearchDictData()
}

/**
 * 字典数据 新增/编辑/详情 对话框相关内容
 */
const {
    showDialog,
    hideDialog,
    submitFormData,
    dialogInfo,
    formInfo,
    formInstance
} = useFormDialog<SysDictDataDTO>(() => handleQuery())

/**
 * 对话框校验规则
 */
const checkFormRoles = reactive<FormRules<SysDictDataDTO>>({
    dictKey: [
        { required: true, message: '请输入字典键', trigger: 'blur' },
        { min: 2, max: 30, message: '字典键长度为2 - 30', trigger: 'blur' }
    ],
    dictValue: [
        { required: true, message: '请输入字典值', trigger: 'blur' },
        { min: 2, max: 30, message: '字典值长度为2 - 30', trigger: 'blur' }
    ],
    comment: [
        { min: 2, max: 30, message: '备注长度为2 - 30', trigger: 'blur' }
    ]
})

onUpdated(() => onSearchDictData())
</script>

<style scoped lang="scss"></style>
